<template>
	<view class="login">
		<!--end 登录图标-->
		<view class="logo">
			<image class="img" src="../../static/public/logo@3x.png"></image>
		</view>
		<view class="form_wrap">
			<view class="btn_wrap">
				<view class="header_tab" :class="[currentTab==1 ? 'on' : '']" :data-current="1" @click="swichNav">
					账号密码登录
				</view>
				<!-- <text class="border-r"></text> -->
				<view class="header_tab" :class="[currentTab==0 ? 'on' : '']" :data-current="0" @click="swichNav">
					手机验证码登录
				</view>
			</view>
			<!-- 手机验证登录 -->
			<view v-if="currentTab==0">
				<view class="item item-input">
					<uni-icons type="contact" size="20"></uni-icons>
					<m-input type="number" clearable v-model="codeparmas.username" placeholder="请输入手机号" :maxLength="11"></m-input>
				</view>

				<view class="item item-input">
					<uni-icons type="email" size="20"></uni-icons>
					<m-input type="number" clearable v-model="codeparmas.code" placeholder="请输入验证码" :maxLength="11"></m-input>
					<view class="sendCode">
						<button size="mini" :disabled="btnDis" @tap="sendCode">{{btnText}}</button>
					</view>
				</view>
			</view>
			<!-- 账号密码登录 -->
			<view v-if="currentTab == 1">
				<view class="item item-input">
					<uni-icons type="contact" size="20"></uni-icons>
					<m-input type="number" clearable v-model="parmas.username" placeholder="请输入手机号" :maxLength="11"></m-input>
				</view>

				<view class="item item-input">
					<uni-icons type="locked" size="20" color=""></uni-icons>
					<m-input type="password" displayable v-model="parmas.password" placeholder="请输入密码" :maxLength="12"></m-input>
				</view>
			</view>

			<view class="uni-btn-v">
				<button class="loginBtn" @click="formSubmit">登录</button>
				<button class="shenQing" @click="goToRegis">申请独立经纪人</button>
			</view>
			<!-- 底部 -->
			<!-- <view class="footer">
				<view class="footer-text">——— 其他登录方式 ———</view>
				<button open-type="getUserInfo" lang="zh_CN" @click="appLoginWx" hover-class="img-hover" class="btn">
					<image class="img" src="/static/public/wx.png"></image>
				</button>
			</view> -->
		</view>
		<wyb-loading ref="loading" title= "登录中"/>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters,
		mapActions
	} from 'vuex'
	import mInput from '@/components/m-input/m-input.vue'
	import graceChecker from '@/common/graceChecker.js'
	import formRuleConfig from '@/config/formRule.config.js'

	export default {
		components: {
			mInput,
		},
		data() {
			return {
				currentTab: "1",
				parmas: {
					username: null,
					password: null,
				},
				codeparmas: {
					username: null,
					code: null,
				},
				btnDis: false,
				submitBtnDis: false,
				btnText: "获取验证码",
			}
		},
		computed: {
			...mapState(["openId"]),
			...mapGetters(['hasLogin'])
		},
		methods: {
			//注册
			goToRegis() {
				uni.navigateTo({
					url: "/pages/public/register"
				})
			},
			//微信授权登录
			appLoginWx() {
				let thisObj = this;
						uni.getProvider({
							service: 'oauth',
							success: function(res) {
								if (~res.provider.indexOf('weixin')) {
									uni.login({
										provider: 'weixin',
										success: (res2) => {
											uni.getUserInfo({
												provider: 'weixin',
												success: (info) => { 
													//这里请求接口
													thisObj.$store.commit("SET_OPENID",  info.userInfo.openId || "");
													thisObj.$api.autoLignWx(info.userInfo).then(resp => {
														let resData = resp.data.data;
														thisObj.$store.commit("SET_USERINFO", resData.info || {});
														thisObj.$store.commit("SET_TOKEN", resData.COOKIE_TOKEN || {});
														uni.switchTab({
															url: '/pages/index/index',
														});
													}).catch( err =>{
														if(err.code == 405){
															uni.showModal({
																title: '警告',
																content: err.message,
																showCancel: false,
																success: function(res) {
																	if (res.confirm) {
																		uni.navigateTo({
																			url: "/pages/public/bindAccount"
																		})
																	}
																}
															});
														}
													})
												},
												fail: () => {
													uni.showToast({
														title: "微信登录授权失败",
														icon: "none"
													});
												}
											})
										},
										fail: () => {
											uni.showToast({
												title: "微信授权失败",
												icon: "none"
											});
										}
									})
								} else {
									uni.showToast({
										title: '请先安装微信或升级版本',
										icon: "none"
									});
								}
							}
						});
					},
					//选项框点击
					swichNav: function(e) {
						this.currentTab = e.target.dataset.current;
					},
					formSubmit (){
						let that = this;
						if (this.currentTab == 1) {
							// let checkRes = graceChecker.check(this.parmas, formRuleConfig.loginRule);
							// if (!checkRes) {
							// 	uni.showToast({
							// 		title: graceChecker.error,
							// 		icon: "none"
							// 	});
							// 	return;
							// }
							that.$refs.loading.showLoading();
							this.$api.autoLign(this.parmas).then(res => {
								//that.$refs.loading.hideLoading()
								//用户信息
								let dataUser = res.data.data.info;
								//token
								let token = res.data.data.COOKIE_TOKEN;
								this.$store.commit("SET_USERINFO", dataUser || {});
								this.$store.commit("SET_TOKEN", token || {});
								uni.switchTab({
									url: '../index/index',
								});
							}).catch((err) => {
								that.$refs.loading.hideLoading()
								uni.showToast({
									title: err,
									icon: 'none'
								})
							})
						} else {
							let checkRes = graceChecker.check(this.codeparmas, formRuleConfig.loginCodeRule);
							if (!checkRes) {
								uni.showToast({
									title: graceChecker.error,
									icon: "none"
								});
								return;
							}
							that.$refs.loading.showLoading();
							this.$api.autoLignCode(this.codeparmas).then(res => {
								//that.$refs.loading.hideLoading()
								//用户信息
								let dataUser = res.data.data.info;
								//token
								let token = res.data.data.COOKIE_TOKEN;

								this.$store.commit("SET_USERINFO", dataUser || {});
								this.$store.commit("SET_TOKEN", token || {});
								uni.switchTab({
									url: '../index/index',
								});
							}).catch((err) => {
								uni.showToast({
									title: err,
									icon: 'none'
								})
								that.$refs.loading.hideLoading()
							})
						}
					},

					//发送验证码
					async sendCode() {
							let checkRes = graceChecker.check(this.codeparmas, formRuleConfig.sendCodeRule);
							if (!checkRes) {
								uni.showToast({
									title: graceChecker.error,
									icon: "none"
								});
								return;
							}
							await this.$api.getMsgCode(this.codeparmas.username);

							uni.showToast({
								title: '发送成功'
							});
							// 开启倒计时
							this.countDown();
						},

						// 验证码倒计时
						countDown() {
							let t = null;
							let timer = 60;
							this.btnDis = true;
							clearInterval(t);
							this.btnText = `${timer}s`;
							t = setInterval(() => {
								if (timer == 0) {
									clearInterval(t);
									this.btnText = "重新发送";
									this.btnDis = false;
									return;
								}
								timer--;
								this.btnText = `${timer}s`;
							}, 1000)
						}
				}
			}
</script>

<style scoped lang="scss">
	.logo {
		width: 100%;
		/* height: 180rpx; */
		display: flex;
		justify-content: center;
	}

	.logo .img {
		width: 150rpx;
		height: 150rpx;
		margin: 75rpx 0 20rpx 0;
		border-radius: 7px;
	}

	.form_wrap {
		box-shadow: none;
		width: 80%;
		margin: 0 10%;
	}

	.btn_wrap {
		border-bottom: 1px solid rgba(221, 221, 221, 0.3);
		margin-bottom: 20px;
		display: flex;
		justify-content: space-around;
	}

	.header_tab {
		font-size: 14px;
		text-align: center;
		padding: 0.8rem 0.2rem;
		color: #999999;
	}

	.on {
		color: #52aaf8 !important;
		border-bottom: 2px solid #52aaf8;
	}

	.item {
		border-bottom: 1px rgba(221, 221, 221, 0.3) solid;
		display: flex;
		padding: 6px 0 5px 16px;
		align-items: center;
		font-size: 14px;
	}

	input {
		font-size: 14px;
	}

	.loginBtn {
		width: 80%;
		margin: 68rpx 10% 0 10%;
		background: #52aaf8;
		border-radius: 25px;
		color: white;
		height: 76rpx;
		line-height: 76rpx;
		font-size: 14px;
	}

	.shenQing {
		width: 80%;
		margin: 36rpx 10%;
		border: 2px #52aaf8 solid;
		border-radius: 25px;
		color: #52aaf8;
		height: 76rpx;
		line-height: 72rpx;
		font-size: 14px;
	}

	.footer {
		width: 100%;
		height: 200rpx;
		margin-top: 112rpx;
		text-align: center;
		color: #999999;
		font-size: 13px;

		.img {
			width: 100%;
			height: 100%;
			background-repeat: repeat;
		}

		.img-hover {
			background-color: transparent;
		}

		.btn {
			width: 40px;
			height: 40px;
			margin-top: 20rpx;
			padding: 0;
			border: none;
			outline: medium;
		}

		.btn:after {
			border: none;
		}
	}
</style>
